<template>
  <!--  修改用户名或者密码
        1:定义获取用户信息/修改用户信息的api
        2：导入api
        3：进入页面接口获取用户信息
        4：回显姓名
        5：修改：调用修改api
           调用成功
              a:提示
 -->
  <div class="personnel">
    <el-card>
      <el-tabs>
        <el-tab-pane label="登录账号设置">
          <el-form
            ref="form"
            label-width="80px"
            class="form"
            :model="form"
            :rules="rules"
          >
            <el-form-item label="姓名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item style="text-align:center">
              <el-button type="primary" @click="renewal">更新</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" lazy>
          <component
            :is="'Info'"
            :userInfo="userInfo"
            @upsedataIfo="upsedataIfo"
          />
        </el-tab-pane>
        <el-tab-pane label="岗位信息" lazy>
          <Job />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { sysUser } from '@/api/user'
import { sysUserPut } from '@/api/employees'
export default {
  components: {
    Info: () => import('./components/Info'),
    Job: () => import('./components/Job')
  },
  data () {
    return {
      id: this.$route.params.id,
      userForm: '',
      userInfo: {},
      form: {
        username: '', //string	非必须		姓名
        password: ''
      },
      rules: {
        username: [{ required: true, message: '必填', trigger: 'change' }],
        password: [
          { required: true, message: '必填', trigger: 'change' },
          { min: 6, max: 12, message: '密码长度要在6-12位', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.getdata()
  },
  methods: {
    //  导入员工信息并回显
    async getdata () {
      const res = await sysUser(this.id)
      this.userForm = res.data.data
      // 深拷贝后传入子组件不要与父组件数据关联
      this.userInfo = JSON.parse(JSON.stringify(res.data.data))

      this.form.username = res.data.data.username
      console.log('员工信息回显', res)
    },
    renewal () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          await sysUserPut(Object.assign({}, this.userForm, this.form))
          //  提醒修改成功
          this.$message.success('修改成功')
          //  更新到个人详情组件
          this.userInfo.username = this.form.username
          this.userInfo.password = this.form.password
          console.log(valid)
        }
      })
    },
    upsedataIfo (obj) {
      // 子组件修改完更新到父组件
      this.userForm = JSON.parse(JSON.stringify(obj))
      this.form.username = this.userForm.username
      console.log('upsedataIfo')
    }
  }
}
</script>

<style lang="scss" scoped>
.personnel {
  padding: 20px;
  .form {
    width: 500px;
    margin: 50px 0 50px 50px;
  }
}
</style>
